<template>
    <div class="Home">
        <div>
            <div>

            <div>
                <!--搜索框-->
                <van-search shape="round" placeholder="请输入搜索关键词" />
            </div>
        </div>
            <!--轮播图-->
            <div class="swipe">
                <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                    <van-swipe-item v-for="(a, b) in bannerImg">
                        <img class="auto" :src="a.pic" alt="">
                    </van-swipe-item>
                </van-swipe>
            </div>
            <!--推荐歌单-->
            <div class="songList">
                <div class="title">推荐歌单</div>
                <!--歌单列表-->
                <div class="songList-items">
                    <!--滚动区-->
                    <div class="scroll">
                        <!--每一个歌单-->
                        <div class="item" @click="$event => viewDetail(item.id)" v-for="(item, index) in List" :key="index">
                            <img class="auto" :src="item.picUrl" alt="">
                            <div class="name">{{ item.name }}</div>
                        </div>


                    </div>
                </div>
            </div>
        </div>
         <!--歌曲列表-->
         <div>
            <List :list='MusicLists' />
        </div>
    </div>
   
</template>


<script>
import { getBanner, getSongList, getMusicList } from "../Api/Home";
export default {
    name: "Home",
    data() {
        return {
            //存放轮播图数据
            bannerImg: [],
            //存放歌单数据
            List: [],

            MusicLists: [],

        };
    },
    //你在看到这个页面之前，要做的时间
    created() {
        this.banner();
        this.SongList();
        this.MusicList();
  

    },
    //方法
    methods: {
        //获取首页歌曲列表
        async MusicList() {
            let res = await getMusicList();
            this.MusicLists = res.data.result
            console.log(this.MusicLists);

        },
        //点击跳转歌单详情
        viewDetail(e) {
            this.$router.push({ name: "Detail", query: { id: e } })

        },
        //获取首页歌单
        async SongList() {
            let res = await getSongList()
            console.log("这是首页歌单", res.data.result);
            this.List = res.data.result
        },
        //获取轮播图的方法
        async banner() {
            let res = await getBanner();
            console.log(res.data);
            //赋值
            this.bannerImg = res.data.banners;
            console.log("可以循环的数组", this.bannerImg);
        },

    },

};
</script>
<style lang="less" scoped>


.title {
    padding: 10px 0;
    font-size: 15px;
}

.Home { 
    padding-bottom: 95px;
    margin: 0 5px;
}

.name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 6px 2px 0 6px;
    min-height: 30px;
    line-height: 1.2;
    font-size: 13px;

}

::-webkit-scrollbar {
    display: none;
}

.scroll {
    display: flex;
    width: 880px;
}

.item {
    width: 100px;

    margin-right: 10px;

}

.songList-items {
    overflow: scroll;

}

.swipe {

    border-radius: 10px;
    overflow: hidden;
}

.auto {
    width: 100%;
}
</style>
